@import "../global/global";

$tag-background-color: #e9f1f5;
$tag-max-height: 20px;

.ring-tag {
  height: $tag-max-height;
  box-sizing: border-box;
  display: inline-block;
  margin-right: $ring-unit / 2;
  padding: 1px $ring-unit / 2;
  color: $ring-text-color;
  font-size: 12px;
  line-height: 15px;

  background-color: $tag-background-color;
  border-radius: $ring-border-radius;
  border: 1px solid $tag-background-color;

  &_focused, &:focus {
    outline: none;
    box-shadow: 0 0 0 2px $ring-outline-color;
  }
}

.ring-tag__remove.ring-tag__remove {
  @include ring-vertical-compensation();
  margin-right: -$ring-unit / 2;
  padding: 0 $ring-unit / 2;

  color: $ring-dark-gray-color;

  &:hover {
    color: $ring-link-hover-color;
  }
}

.ring-tag__ring-icon {
  margin-right: $ring-unit / 2;
  color: $ring-dark-gray-color;
  @include ring-vertical-compensation(-1px);
}

.ring-tag__avatar-container {
  position: relative;
  top: -2px;
  left: -5px;
  box-sizing: border-box;
  display: inline-block;
  height: $tag-max-height;
  vertical-align: top;
  overflow: hidden;
  border-radius: $ring-border-radius;
}

.ring-tag__custom-icon {
  vertical-align: bottom;
  margin-right: $ring-unit / 2;
  max-width: $ring-unit * 2;
  max-height: $ring-unit * 2;
}


.ring-tag__avatar-icon {
  max-height: $tag-max-height;
  max-width: $tag-max-height;
  border-radius: $ring-border-radius;
}
